<script setup>
import {post} from "@/request/request";
import {onShow} from "@dcloudio/uni-app";
import {ref} from "vue";

const userInfos = ref({});
const swiper = ref({});
const popup = ref(null);
const product = ref(null);
const phone = ref(null);
const safety = ref(null)
const listInfo = ref({})

const list = [
  {text: "زاكاسلىرىم", icon: "/static/path.svg", type: "order"},
  // {text: "ئادىرسلىرىم", icon: "/static/user-position.svg", type: "address"},
  // {text: "مال قايتۇرۇش", icon: "/static/user-return.svg", type: "backward"},
  {
    text: "بىز ھەققىدە",
    icon: "/static/user-us.svg",
    type: "product",
  },
  {
    text: "كىلىشىم",
    icon: "/static/user-pro.svg",
    type: "safety",
  },
  {text: "ھەمكارلىق", icon: "/static/kefu.svg", type: "phone"},
];

const popupData = [
  {
    text: "باشبەت",
    icon: '/static/home.svg'
  },
  {
    text: "زاكاسلىرىم",
    icon: '/static/path.svg'
  },
  {
    text: "تەڭشەك",
    icon: '/static/setup.svg'
  },
];
onShow(() => {
  userInfo();
  swiperData();
  mineSettings()
});

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};

const swiperData = () => {
  post("banner").then((res) => {
    const {data} = res;
    swiper.value = data;
  });
};
const userInfo = () => {
  post("userInfo").then((res) => {
    const {data} = res;
    userInfos.value = data;
  });
};

const mineSettings = () => {
  post('mineSettings').then(res => {
    const {data} = res;
    listInfo.value = data;
    console.log('mineSettings', data)
  })
}

const topClick = () => {
  popup.value.open();
};

const listClick = (item) => {
  console.log(item.type);
  const type = item.type;
  switch (type) {
    case "order":
      orderClick();
      break;
    case "product":
      productClick()
      break;
    case "safety":
      safetyClick()
      break;
    case "phone":
      phoneClick()
      break;
  }
};


const productClick = () => {
  product.value.open();
}

const phoneClick = () => {
  phone.value.open()
}

const phoneItemClick = (e) => {
  uni.makePhoneCall({
    phoneNumber: e
  })
}

const safetyClick = () => {
  safety.value.open()
}

const orderClick = () => {
  uni.navigateTo({
    url: "/pages/order/order",
  });
};

const userClick = () => {
  uni.navigateTo({
    url: '/pages/user/setup/setup'
  })
};

const popupItemClick = (index) => {
  switch (index) {
    case 0:
      uni.navigateTo({
        url: '/pages/home/home'
      })
      break;
    case 1:
      uni.navigateTo({
        url: '/pages/order/order'
      })
      break;
    case 2:
      uni.navigateTo({
        url: '/pages/user/setup/setup'
      })
      break;
  }
}
</script>
<template>
  <uv-navbar :fixed="true" :placeholder="true" @leftClick="topClick">
    <template v-slot:left>
      <view class="uv-nav-slot">
        <image src="/static/user-list.svg"/>
      </view>
    </template>
  </uv-navbar>
  <view class="top-img">
    <image src="/static/user-top.png"/>
  </view>
  <view class="top-navbar">
    <image class="user-avatar" :src="userInfos.u_avatar" @click="userClick"/>
    <text>{{ userInfos.u_nickname }}</text>
    <view class="user-edit" @click="userClick">
      <image class="user-pen" src="/static/user-pen.png"/>
      <text>ئەزا ئۇچۇرىڭىزنى تولدۇرۇڭ</text>
    </view>
  </view>
  <view class="user">
    <view class="user-swiper">
      <uv-swiper
          :list="swiper"
          keyName="ca_image"
          height="268rpx"
          :circular="true"></uv-swiper>
    </view>
    <view v-for="(item, index) in list" :key="index">
      <view class="list-box" @click="listClick(item)">
        <view style="display: flex;align-items: center;width: 250rpx">
          <image style="width: 26rpx;height: 26rpx;" :src="item.icon"/>
          <view style="margin: 20rpx">{{ item.text }}</view>
        </view>
        <image src="/static/arrow-left.svg"/>
      </view>
    </view>
  </view>
  <!--弹出层-->
  <template>
    <uv-popup ref="popup" mode="right" bgColor="#F9F9F9">
      <view class="popup">
        <view class="popup-avatar" @click="loginClick">
          <image :src="userInfos && userInfos.u_avatar ? userInfos.u_avatar : '/static/avatar.svg'"/>
          <text>{{ userInfos && userInfos.u_nickname !== undefined ? userInfos.u_nickname : "تىزىملىتىڭ" }}</text>
        </view>
        <template v-for="(item, index) in popupData">
          <view class="popup-list" @click="popupItemClick(index)">
            <image :src="item.icon"/>
            <text>{{ item.text }}</text>
            <image src="/static/arrow-left.svg"/>
          </view>
        </template>
        <button open-type="contact" hover-class="none" class="popup-button" @click="CustomerClick">
          <image src="/static/kefu.svg"/>
          <text>مۇلازىمەتچى</text>
          <image src="/static/arrow-left.svg"/>
        </button>
      </view>
    </uv-popup>
  </template>

  <!--  list弹出层-->
  <uv-popup ref="product" mode="bottom">
    <view style="width: 100%;display: flex;align-items: center;justify-content: center;">
      <rich-text style="width: 700rpx;padding: 20rpx" :nodes="listInfo.privacy_agreement"/>
    </view>
  </uv-popup>
  <uv-popup ref="phone" mode="bottom">
    <view style="width: 100%;display: flex;align-items: center;justify-content: center;height: 200rpx">
      <view @click="phoneItemClick(listInfo.mine_tel)" style="padding-bottom: env(safe-area-inset-bottom);">{{
          listInfo.mine_tel
        }}
      </view>
    </view>
  </uv-popup>
  <!--  safety-->
  <uv-popup ref="safety" mode="bottom" custom-style="height: 1300rpx;">
    <view style="width: 100%;display: flex;align-items: center;justify-content: center;">
      <rich-text style="padding-bottom: env(safe-area-inset-bottom);" :nodes="listInfo.user_agreement"/>
    </view>
  </uv-popup>

</template>

<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;
  z-index: 999;

  image {
    width: 44rpx;
    height: 44rpx;
  }
}

.top-img {
  width: 100%;
  height: 561rpx;
  position: relative;
  //z-index: 1;

  image {
    width: 100%;
    height: 100%;
  }
}

.top-navbar {
  position: absolute;
  top: 31%; /* 从顶部偏移 31% */
  left: 50%; /* 从左侧偏移 50% */
  transform: translate(-50%, -50%); /* 将 .user 居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .user-avatar {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    border: 2rpx solid #ff8473;
  }

  text {
    margin: 20rpx;
    color: #111111;
    font-size: 36rpx;
    font-weight: 400;
  }

  .user-edit {
    height: 42rpx;
    border-radius: 8rpx;
    border: 2rpx solid #FF8473;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6rpx;

    text {
      color: #FF8473;
      font-size: 24rpx;
    }

    .user-pen {
      width: 24rpx;
      height: 24rpx;
    }
  }
}

.user {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);

  .user-swiper {
    width: 690rpx;
    height: 268rpx;
  }

  .list-box {
    width: 690rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: #F5F5F5B0 2rpx solid;

    image {
      width: 14rpx;
      height: 28rpx;
    }
  }
}

.popup {
  direction: rtl;
  padding: 15rpx;

  .popup-avatar {
    margin-top: 200rpx;
    height: 106rpx;
    width: 427rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 99999rpx;
    }

    text {
      color: #ff9385;
    }

    .avatar-img {
      width: 20px;
      height: 20rpx;
    }
  }

  .popup-list {
    margin-top: 30rpx;
    width: 427rpx;
    height: 76rpx;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5rpx;
    border-radius: 20rpx;

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }

  .popup-button {
    margin-top: 30rpx;
    padding: 10rpx;
    width: 427rpx;
    height: 76rpx;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 20rpx;

    text {
      font-size: 32rpx;
      color: #111111;
    }

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }
}

button::after {
  border: none;
}
</style>
